<template>
  <div class=" container" >
        <div class="my_table">
            <el-table :data="List2.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
            style="{width: '100%',background-color:'#10254a'}" :header-cell-style= "{color: '#edef5c',height: '40px',background:'#10254a'}" 
            row-class-name="rows"
            :cell-style="columncolorStyle">
            <el-table-column
                fixed
                prop="type"
                label="报警类型"
                width="180"
                align="center">
            </el-table-column>
            <el-table-column
                prop="date"
                label="报警时间"
                width="180"
                align="center">
            </el-table-column>
            <el-table-column
                prop="img"
                label="图片URL"
                width="180"
                align="center"
                :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <el-popover
                        placement="right"
                        title=""
                        trigger="click">
                        <el-image slot="reference" 
                        :src="ip+scope.row.imgPath"
                        :alt="scope.row.name"
                        style="max-height: 200px;max-width: 200px">
                        </el-image>
                        <el-image :src="scope.row.imgPath"></el-image>
                </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="number"
                label="摄像头编号"
                align="center">
            </el-table-column>
            <el-table-column
                prop="name"
                label="摄像头名称"
                align="center">
            </el-table-column>
            <el-table-column
                prop="confidence"
                label="置信度"
                align="center">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                    <el-button
                    @click.native.prevent="handleDelete(scope.$index)"
                    type="text"
                    size="small">
                    <div class="change_icon"><i class="el-icon-circle-close"></i></div>
                    </el-button>
                </template>
            </el-table-column>
    </el-table>
        </div>
        <div class="row">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="List2.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {getPeoalarmList,deletePeoId} from '@/api/fire'
export default {
    name:'Peoalarm',
    data() {
        return {
            ip:'http://localhost:9090',
            List2:[],
            currentPage: 1, //  el-pagination 初始页
            pagesize: 10, //  el-pagination 每页的数据
        }
    },
    created() { 
        this.getUserList2()    
    },
    methods:{
        async handleDelete(index) {
                // await this.$http.delete("http://localhost:9090/peopleAlarm/" + this.List2[index].id)
                await deletePeoId(this.List2[index].id)
                .then(res => {
                    console.log(res)
                    if(res.data&&res.data.code==200){
                            // 不发请求更新页面
                        this.List2.splice(index,1)
                        this.$message.success("删除成功")
                    }
                }).catch(error =>{
                    this.$message.error(error)
                })      
        },
        getUserList2() {
            //使用axios发送ajax请求
            //axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
            // this.$http.get("http://localhost:9090/peopleAlarm/getAll")
            getPeoalarmList()
                .then(response =>{//请求成功执行then方法
                    if(response.data.code==200){
                        this.List1 = response.data.data
                    console.log(this.List1) 
                    }
                    else this.$message.success(response.data.data) 
                }) 
                .catch(error =>{
                }) //请求失败执行catch方法
        },
        handleSizeChange: function(size) {
            this.pagesize = size
            console.log(this.pagesize) // 每页下拉显示数据
        },
        handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage
        console.log(this.currentPage) // 点击第几页
        },
        columncolorStyle({row,column,rowIndex,columnIndex}){
            if(row){
                return 'background:#10254a'
            }
            //  if(columnIndex==0){        
            //     return 'color:#ad6066'
            // }
        },
        // previewPic(url){
        //     this.previewpic=url;
        //     this.dialogVisible=true;
        // },
        timer2() {
            return setTimeout(()=>{
                this.getUserList2()  
            },5000)
        },
        },
    watch: {
        List2() {
            this.timer2()  
        },
    },
    destroyed() {
        clearTimeout(this.timer)
    }
}
</script>

<style scoped>
 @media screen and (min-width:1280px) {
    .container{
        position: relative;
        width:1280px;
    }
}
.my_table >>> .el-table__row>td{
  /* 去除表格线 */
  border: none;
}
.row{
    height:120px;
    color:#fff;
}
.change_icon{
    font-size: 20px;
}
</style>